extends layouts/main

block about
	div.about
		div.clearfix.wrapper
			div.introduction
				p
					| MooTools is a collection of JavaScript utilities designed for the intermediate to advanced JavaScript developer. It allows you to write powerful and flexible code with its elegant, well documented, and coherent APIs.
				p
					| MooTools code is extensively documented and easy to read, enabling you to extend the functionality to match your requirements.

			div.license
				h2
					| Open Source License
				p
					space = ""
					| MooTools libraries are released under the #{space}
					a(href='http://opensource.org/licenses/MIT')
						| Open Source MIT license
					|  which gives you the possibility to use them and modify them in every circumstance.

block examples

	.clearfix.wrapper.examples.modules
		section
			h1
				| How to use?

			div
				h3
					span.command MooTools Selectors
				p
					| Selectors for DOM Elements
				:highlight(lang=js)
					// get elements by class
					$$('.foo'); // or even: document.getElements('.foo');

					// selector with different elements
					$$('div.foo, div.bar, div.bar a');

					// get a single element
					document.getElement('div.foo');

			div
				h3
					span.command Ajax!
				p
					| MooTools uses a Class called Request.
				:highlight(lang=js)
					// create a new Class instance
					var myRequest = new Request({
						url: 'getMyText.php',
						method: 'get',
						onRequest: function(){
							myElement.set('text', 'loading...');
						},
						onSuccess: function(responseText){
							myElement.set('text', responseText);
						},
						onFailure: function(){
							myElement.set('text', 'Sorry, your request failed :(');
						}
					});

					// and to send it:
					myRequest.send(data);

				p
					| To send a form it can be even more simple!
				:highlight(lang=js)
					myForm.send();
					// optionally you can add/change the form properties
					myForm.set('send', {url: 'contact.php', method: 'get'});

			div
				h3
					span.command How to create new DOM elements
				p
					| A simple MooTools Element example.
				:highlight(lang=js)
					// the short way
					new Element('div#bar.foo');

					// using the element constructor
					new Element('div', {
						'class': 'foo',
						id: 'bar'
					});

		section
			div
				h3
					span.command Event handlers
				p
					| Attach events to be updated on what's happening!
				:highlight(lang=js)
					// attach a click event o a element
					myElement.addEvent('click', function(){
						alert('clicked!');
					});

					// attach several events at a time
					myElement.addEvents({
						mouseover: function(){
							alert('mouseover');
						},
						click: function(){
							alert('click');
						}
					});

				p
					| You can also remove, fire or clone events!
				:highlight(lang=js)
					// remove a event
					myElement.removeEvent(type, fn);


			div
				h3
					span.command MooTools Class
				p
					| A simple MooTools Class example.
				:highlight(lang=js)
					var Animal = new Class({
						initialize: function(age){
							this.age = age;
						}
					});

					var Cat = new Class({
						Extends: Animal,
						initialize: function(name, age){
							// calls initalize method of Animal class
							this.parent(age);
							this.name = name;
						}
					});

					var myCat = new Cat('Micia', 20);
					alert(myCat.name); // alerts 'Micia'.
					alert(myCat.age); // alerts 20.

block updates
	div.updates
		div.clearfix.wrapper
			section
				div.box
					h3 Blog Entries
					h4
						strong: a(href="/blog/#{lastBlogPost.permalink}") #{lastBlogPost.title}
					p !{lastBlogPost.summary.slice(0, 240)}...

			section.box
				div.box
					h3 
						span.github(aria-hidden='true')
						| GitHub Activity
					include ./partials/GitHubEvents
					mixin GitHubEvents(githubEvents, 5)

			section.box
				div.box
					h3 
						span.twitter(aria-hidden='true')
						| Latest Tweets
					if (tweetFeed) 
						for tweet in tweetFeed
							p: a(href="https://twitter.com/mootools/status/#{tweet.id_str}") #{tweet.text}

block main

	block about
	
	hr

	block examples

	hr

	block updates
